<template>
  <el-input v-model="keyword" placeholder="请输入搜索关键字" class="input-with-select">
    <template #prepend>
      <el-select v-model="type" placeholder="全部类型" style="width: 100px">
        <el-option v-for="t in typeArr" :key="t.value" :value="t.value" :label="`${t.label}类型`" />
      </el-select>
    </template>
    <template #append>
      <el-button :icon="Search" @click="search" />
    </template>
  </el-input>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
interface Type {
  value: string
  label: string
}
defineProps({
  typeArr: {
    type: Array as () => Type[],
    default: () => {
      return []
    }
  }
})
const emits = defineEmits(['search'])
const keyword = ref('')
const type = ref('')
const search = () => {
  emits('search', { type, keyword: keyword.value })
}
</script>

<style scoped></style>
